<!--
 * @Author: lyx 2858535420@qq.com
 * @Date: 2023-04-07 15:21:12
 * @LastEditors: lyx 2858535420@qq.com
 * @LastEditTime: 2023-04-27 17:41:58
 * @FilePath: /bangand-low-code/src/layouts/components/Header.vue
 * @Description: 头部样式
-->
<template>
  <a-layout-header :class="getHeaderClass" :style="getWrapStyle">
    <div :class="`${prefixCls}-left`">
      <AppLogo v-if="isShowFullHeader" :theme="navTheme" :showTitle="isShowAppTitle" />
      <HeaderTrigger v-if="!isTopMenu && isHeadTrigger" />
      <Breadcrumb v-if="isShowBreadcrumb" />
    </div>

    <div :class="`${prefixCls}-menu`" v-if="isShowTopMenu && !isMobile">
      <LayoutMenu :isHorizontal="true" />
    </div>

    <RightContent :top-menu="isShowTopMenu" :is-mobile="isMobile" :theme="navTheme" />
  </a-layout-header>
</template>

<script>
import Vue from 'vue';
import { objectUtils } from '@/utils';
import defaultSettings from '@/config/defaultSettings';
import { appLatyouMixin } from '@/mixins/app-layout-mixin';

import RightContent from '@/components/GlobalHeader/RightContent.vue';
import AppLogo from './AppLogo.vue';
import LayoutMenu from './LayoutMenu.vue';
import HeaderTrigger from './HeaderTrigger.vue';
import Breadcrumb from './Breadcrumb.vue';

export default {
  // 组件的名字或者页面的名字
  name: 'LayoutHeader',
  mixins: [appLatyouMixin],
  // 加载组件
  components: {
    AppLogo,
    LayoutMenu,
    Breadcrumb,
    RightContent,
    HeaderTrigger
  },
  // 父级组件传过来的值
  props: {},
  // 页面数据
  data() {
    return {
      prefixCls: 'p-layout-header'
    };
  },
  computed: {
    // 头部样式
    getHeaderClass() {
      return [
        'p-layout-header',
        {
          'p-layout-header--fixed': this.fixedHeader,
          'p-layout-header--mobile': this.isMobile
          // 'border-left': this.isSidemenu
        },
        this.navTheme
      ];
    },

    // 获取校验后的宽度
    getCalcContentWidth() {
      let width = this.isSidemenu ? (this.sideCollapsed ? this.menuMinWidth : this.menuWidth) : 0;

      return `calc(100% - ${width}px)`;
    },

    // 头部样式
    getWrapStyle() {
      let style = {};

      if (this.fixedHeader) {
        style.width = this.isMobile ? '100%' : this.getCalcContentWidth;
      }

      return style;
    }
  },
  // 创建后调用
  created() {},
  // 挂载完成调用
  mounted() {},
  // 方法
  methods: {}
};
</script>

<style lang="less" >
.p-layout-header {
  &.border-left {
    border-left-width: 1px;
  }

  &--fixed {
    position: fixed;
    top: 0;
    right: 0;
    z-index: @layout-sider-fixed-z-index;
    width: 100%;
  }

  &-left {
    display: flex;
    height: 100%;
    align-items: center;
  }

  &-menu {
    height: 100%;
    min-width: 0;
    flex: 1;
    align-items: center;
  }

  .app-logo {
    height: @layout-header-height;
    min-width: @side-menu-width;
    padding: 0 10px;
    font-size: 14px;

    img {
      width: @logo-width;
      height: @logo-width;
      margin-right: 2px;
    }
  }
}
</style>
